<script setup lang="ts">
import { hub, blog, links, ciDoc, contribution, starLink } from '@/utils/constants';
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import { queryVersion } from '@/api/version';
import { IVersionVo } from '@/api/dto/version';

const route = useRoute();
const isActive = ref<boolean>(false);
const toggle = (status: boolean) => {
  isActive.value = status;
};
const toCicd = () => {
  window.open('https://ci.jianmu.dev', '_blank');
};
const toOpencla = () => {
  window.open('https://jianmu.opencla.org/', '_blank');
};
const release = ref<IVersionVo>();
onMounted(async () => {
  const result = await queryVersion();
  release.value = result[0];
});
const toRelease = () => {
  window.open(`${release.value?.releaseUrl}/${release.value?.versionNo}`, '_blank');
};
</script>
<template>
  <div :class="['nav-top',isActive?'active':'']">
    <div class="nav-wrapper">
      <div class="left">
        <div class="logo-area">
          <a :href="links.Mulan" target="_blank">
            <div class="mulan"></div>
          </a>
          <div class="divider-line"></div>
          <router-link :to="{name:'index'}">
            <div class="jianmu">
              <div class="version" @click.stop="toRelease" v-if="release">
                {{ release.versionNo }}
              </div>
            </div>
          </router-link>
        </div>
        <div class="link-area">
          <div class="link-item drop-down" @mouseenter="toggle(true)" @mouseleave="toggle(false)">
            <div :class="['drop-down',isActive?'active':'']">
              项目
              <i class="drop-down-icon"></i>
            </div>
            <div class="show-more" @mouseenter="toggle(true)" @mouseleave="toggle(false)" v-show="isActive">
              <div class="link-items">
                <div class="link-item jinanmu-cicd">
                  <div class="tab-title">持续集成&部署</div>
                  <div class="divider-line"></div>
                  <div class="logo" @click="toCicd">
                    <img src="~@/assets/web/svgs/jianmu-logo.svg" alt="">
                  </div>
                </div>
                <div class="link-item open-cla">
                  <div class="tab-title">应用</div>
                  <div class="divider-line"></div>
                  <div class="logo" @click="toOpencla">
                    <img src="~@/assets/web/svgs/opencla-logo.svg" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a :href="hub" target="_blank" class="link-item">
            <span>建木Hub</span>
          </a>
          <a :href="ciDoc" target="_blank" class="link-item">
            <span>文档</span>
          </a>
          <a :href="blog" target="_blank" class="link-item">
            <span>博客</span>
          </a>
          <router-link :to="{name:'contributor'}" :class="['link-item',route.path==='/contributor'?'link-active':'']">
            <span>贡献者</span>
          </router-link>
          <a
            :href='links.Assessment'
            target="_blank" class="link-item">
            <span>生态评估</span>
          </a>
          <a :href='links.Duguang' target="_blank" class="link-item">
            <span>商业支持</span>
          </a>
        </div>
      </div>
      <div class="right">
        <a :href="contribution" target="_blank">
          <img :src="starLink" alt="">
        </a>
      </div>
    </div>
    <div class="op" v-show="isActive"></div>
  </div>
</template>
<style lang="less" scoped>
.nav-top {
  &.active {
    z-index: 3;
  }

  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255);
  box-shadow: 0 2px 10px 0 #eff0f3;

  .op {
    width: 100%;
    height: 159px;
    opacity: 1;
  }

  .nav-wrapper {
    max-width: 1600px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .logo-area {
        margin-left: 3%;
        display: flex;
        align-items: center;

        .mulan {
          width: 88px;
          height: 30px;
          background: url("@/assets/web/svgs/mulan-logo.svg") 100% no-repeat;
        }


        .divider-line {
          margin: 0 15px;
          width: 1px;
          height: 18px;
          background: #CCD0D9;
        }

        .jianmu {
          width: 102px;
          height: 28px;
          background: url("@/assets/web/svgs/jianmu-logo.svg") 100% no-repeat;
          position: relative;
          color: #FFFFFF;

          .version {
            text-align: center;
            min-width: 35px;
            height: 16px;
            box-sizing: border-box;
            position: absolute;
            top: -13px;
            left: 106px;
            padding: 1px 4px;
            font-size: 10px;
            line-height: 14px;
            font-weight: 500;
            background: #FF6A4D;
            border-radius: 8px 8px 8px 0px;

            &::after {
              content: '';
              display: block;
              position: absolute;
              bottom: -4px;
              left: 0;
              width: 6px;
              height: 4px;
              background: url("@/assets/web/svgs/shap.svg") no-repeat;
              background-size: 100%;
            }

          }
        }
      }

      .link-area {
        margin-left: 60px;
        height: 64px;
        display: flex;
        margin-right: 3%;

        .link-item {
          padding: 0 15px;

          &:last-child {
            padding: 0 0 0 15px;
          }

          &.drop-down {
            position: relative;

            .drop-down {
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;

              &.active {
                color: #096DD9;

                .drop-down-icon {
                  transform: rotate(180deg);
                }
              }

              .drop-down-icon {
                transition: all .2s linear;
                width: 16px;
                height: 16px;
                background-image: url("@/assets/web/svgs/drop-down.svg");
                background-repeat: no-repeat;
                background-size: 100%;
                margin-left: 10px;
              }
            }

            .show-more {
              position: fixed;
              top: 64px;
              left: 50%;
              width: 100%;
              transform: translateX(-50%);
              background: rgba(255, 255, 255);

              .link-items {
                width: 100%;
                display: flex;
                justify-content: center;
                margin-top: 30px;

                .link-item {
                  font-size: 18px;
                  font-weight: 400;
                  color: #042749;
                  width: 480px;
                  line-height: 20px;

                  &.open-cla {
                    margin-left: 40px;
                  }

                  .divider-line {
                    height: 1px;
                    background-color: #E7ECF1;
                    margin: 14px 0 30px;
                  }

                  .logo {
                    cursor: pointer;
                    width: 126px;
                    margin-bottom: 30px;

                    img {
                      width: 100%;
                    }
                  }
                }
              }
            }
          }

          &.link-active {
            color: #096DD9;
          }

          line-height: 64px;
          font-size: 16px;
          font-weight: 500;
          color: #042749;
          text-decoration: none;

          &:last-child {
            margin-right: 0px;
          }

          &:hover {
            color: #096DD9;
          }
        }
      }
    }

    .right {
      a {
        width: 140px;
        display: flex;
        align-items: center;

        img {
          width: 100%;
        }
      }

      margin-right: 3%;
    }
  }
}
</style>
